<template>
  <div class='app-container'>
    <!-- 链接-->
    <div class='link'>
      <div>
        <img src='../../../assets/img/peidian.png' class='icon'>
        <span>配电图</span>
        <img src='../../../assets/img/jiantou.png' alt='' class='arrow'>
      </div>
      <div>
        <img src='../../../assets/img/peidian.png' class='icon'>
        <span>视频</span>
        <img src='../../../assets/img/jiantou.png' alt='' class='arrow'>
      </div>
      <div @click='handleClick("/bigScreen")'>
        <img src='../../../assets/img/peidian.png' class='icon'>
        <span>大屏</span>
        <img src='../../../assets/img/jiantou.png' alt='' class='arrow'>
      </div>
      <div @click='handleClick("/bigScreen")'>
        <img src='../../../assets/img/peidian.png' class='icon'>
        <span>大屏</span>
        <img src='../../../assets/img/jiantou.png' alt='' class='arrow'>
      </div>
      <div @click='handleClick("/bigScreen")'>
        <img src='../../../assets/img/peidian.png' class='icon'>
        <span>大屏</span>
        <img src='../../../assets/img/jiantou.png' alt='' class='arrow'>
      </div>
    </div>


    <el-card class='box-card card1'>
      <el-row>
        <el-col :span='6'>
          <div class='basic-list-header-info'>
            <span>我的待办</span>
            <p>8个任务</p>
            <em></em>
          </div>
        </el-col>
        <el-col :span='6'>
          <div class='basic-list-header-info'>
            <span>我的待办</span>
            <p>8个任务</p>
            <em></em>
          </div>
        </el-col>
        <el-col :span='6'>
          <div class='basic-list-header-info'>
            <span>我的待办</span>
            <p>8个任务</p>
            <em></em>
          </div>
        </el-col>
        <el-col :span='6'>
          <div class='basic-list-header-info'>
            <span>我的待办</span>
            <p>8个任务</p>
          </div>
        </el-col>
      </el-row>
    </el-card>


    <el-card class='box-card card2'>
      <div slot='header' class='clearfix'>
        <span>动态</span>
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'homes.data',
  components: {},
  methods: {
    handleClick(path) {
      this.$router.push(path)
    },
  },
}
</script>

<style lang='scss' scoped>
.app-container {
  width: 100%;
  height: 100%;
  position: relative;

  .link {
    width: 100%;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    margin-top: 5px;
    cursor: pointer;

    div {
      width: 230px;
      height: 59px;
      background: #FFFFFF;
      box-shadow: 0px 0px 20px 0px rgba(1, 43, 82, 0.1);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 28px;

      .icon {
        width: 38px;
        height: 38px;
      }

      .arrow {
        width: 11px;
        height: 11px;
      }

      span {
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #333333;

      }
    }
  }

  .box-card {
    width: 100%;
    height: 300px;
    margin-top: 30px;
  }

  .card1 {
    height: 110px;

    .basic-list-header-info {
      position: relative;
      text-align: center;

      span {
        display: inline-block;
        margin-bottom: 4px;
        color: rgba(0, 0, 0, .45);
        font-size: 14px;
        line-height: 22px;
      }

      p {
        margin: 0;
        color: rgba(0, 0, 0, .85);
        font-size: 24px;
        line-height: 32px;
      }

      em {
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 56px;
        background-color: #f0f0f0;
      }
    }

  }

  .card2 {
    height: 600px;

  }

}
</style>
